<script setup lang="ts">
const dateRange = ref<string[]>([])
const modesData = ref<any[]>([
    {
        label: '周',
        value: 'week',
    },
    {
        label: '月',
        value: 'month',
    },
    {
        label: '年',
        value: 'year',
    },
    {
        label: '全部',
        value: 'all',
    },
])
const checkedModes = ref<string[]>([])

const statisticsData = ref<any[]>([
    {
        label: '咨询人数',
        value: '19.9万',
    },
    {
        label: '咨询消息数',
        value: '2633',
    },
    {
        label: '回复人数',
        value: '1.1万',
    },
    {
        label: '回复消息数',
        value: '1.1万',
    },
    {
        label: '平均回复时长',
        value: '2633',
    },
    {
        label: '内容统计',
        value: '1.1万',
    },
    {
        label: '屏蔽词统计',
        value: '1.1万',
    },
    {
        label: '更换统计',
        value: '19.9万',
    },
])

// #region UI Listener
function onCheckboxGroupChange(value: string[]) {
    checkedModes.value = value?.length ? [value.at(-1) as any] : []
}
// #endregion
</script>

<template>
    <div class="flex justify-end">
        <div class="w-500">
            <label>
                <span>日期选择：</span>

                <el-date-picker v-model="dateRange"
                                type="daterange"
                                start-placeholder="请选择开始日期"
                                end-placeholder="请选择结束日期"
                />
            </label>
        </div>

        <el-checkbox-group v-model="checkedModes"
                           fill="#409EFF"
                           @change="onCheckboxGroupChange"
        >
            <el-checkbox-button v-for="mode in modesData"
                                :key="mode.value"
                                :value="mode.value"
            >
                {{ mode.label }}
            </el-checkbox-button>
        </el-checkbox-group>
    </div>

    <div class="mt-20 flex flex-wrap">
        <div v-for="sta in statisticsData"
             :key="sta.value"
             class="px-8 py-20 font-semibold w-[15%]"
        >
            <div class="font-[16px] truncate text-center">
                {{ sta.value }}
            </div>

            <div class="font-[16px] truncate text-center">
                {{ sta.label }}
            </div>
        </div>
    </div>
</template>
